import { Button, Flex } from "antd";
import { DoubleLeftOutlined } from "@ant-design/icons";

type Props = {
    tagName?: string;
    fangXiang: "left" | "right" | "top" | "bottom";
};
export default function (props: Props) {
    return (
        <Flex gap={10} vertical={props.fangXiang === "top" || props.fangXiang === "bottom"} align="center" style={{ cursor: "pointer" }}>
            {props.fangXiang === "top" || props.fangXiang === "left" ? <span>{props.tagName || "null"}</span> : null}
            <Button color="default" variant="text" size="small">
                {props.fangXiang === "left" ? <DoubleLeftOutlined /> : null}
                {props.fangXiang === "right" ? <DoubleLeftOutlined style={{ transform: "rotate(180deg)" }} /> : null}
                {props.fangXiang === "top" ? <DoubleLeftOutlined style={{ transform: "rotate(90deg)" }} /> : null}
                {props.fangXiang === "bottom" ? <DoubleLeftOutlined style={{ transform: "rotate(270deg)" }} /> : null}
            </Button>
            {props.fangXiang === "bottom" || props.fangXiang === "right" ? <span>{props.tagName || "null"}</span> : null}
        </Flex>
    );
}
